<template>
	<view class="main">
		<view class="title">
			<view class="own" v-if="group && Object.keys(group).length > 0" @click.stop="openGroupInfo">
				<view class="imgsbox">
					<image class="imgs" :src="group && Object.keys(group).length > 0 ? ownPic : '/static/nicPic/m2.png'" mode="aspectFill"></image>
				</view>
				<view class="" style="display: flex; flex-direction: column">
					<view class="groupname">
						<text style="color: white; font-size: 26rpx; text-align: center">{{ group && Object.keys(group).length > 0 ? group.groupName : '申请群主' }}</text>
					</view>
					<view class="groupname">
						<text style="color: white; font-size: 18rpx; text-overflow: ellipsis">这是群介绍</text>
					</view>
				</view>

				<view class="" style="display: flex; flex-direction: row; justify-content: center; width: 30rpx; height: 30rpx; align-self: center">
					<uni-icons type="bottom" size="20" color="white"></uni-icons>
				</view>
			</view>
			<!-- 	 申请群主 -->
			<view class="own nogroup" v-else @click="handleRegOwn">
				<view class="imgsbox two">
					<image class="imgs_nogroup two" src="/static/text.png" mode="aspectFill"></image>
				</view>
				<view class="" style="display: flex; flex-direction: column">
					<view class="groupname nogroup" style="height: 60rpx">
						<text style="color: white; font-size: 32rpx; text-align: center">{{ '申请群主' }}</text>
					</view>
				</view>
			</view>

			<view class="imgsbox four" @click="membersInfo">
				<image class="memberImg" v-if="pepole.length > 1" :src="pepole[pepole.length - 1].iconPath || '/static/none.png'" mode="aspectFill"></image>
				<image class="memberImg" v-if="pepole.length > 2" :src="pepole[pepole.length - 2].iconPath || '/static/none.png'" mode="aspectFill"></image>
				<image class="memberImg" v-if="pepole.length > 3" :src="pepole[pepole.length - 3].iconPath || '/static/none.png'" mode="aspectFill"></image>
				<view class="count">
					<text style="align-self: center; color: white; font-weight: 500; font-size: 28rpx">{{ count }}</text>
				</view>
			</view>
			<view class="iconsbox"><uni-icons type="more-filled" size="28" @click="handleMe"></uni-icons></view>
		</view>
	</view>
</template>
<script>
const db = uniCloud.databaseForJQL();
export default {
	name: 'maptopbar',
	props: {
		markers: {
			type: Array,
			default: () => []
		},
		count: {
			type: Number,
			default: 0
		},
		group: {
			type: Object,
			default: () => {}
		}
	},
	watch: {
		group: {
			handler(newval) {
				   
		       if(newval?.ownId){
				  const ownId=newval.ownId
				this.getOwnPic(ownId) 
			   }
				
			}
		}
	},
	data() {
		return {
			stateConfig: {
				isSound: 1
			},
			ownPic: '',

			islove: true
		};
	},

	computed: {
		pepole() {
			return this.markers.filter((item) => {
				return item.type === '普通用户';
			});
		}
	},

	methods: {
		membersInfo() {
			const format = encodeURIComponent(JSON.stringify(this.markers));

			uni.navigateTo({
				url: `/pages/membersInfo/membersInfo?membersInfo=${format}`
			});
		},
		handleMe() {
			uni.navigateTo({
				url: '/pages/me/me'
			});
		},
		openGroupInfo() {
			console.log(this.group.groupId);
			uni.navigateTo({
				url: `/pages/groupChat/groupChat?id=${this.group.groupId}`
			});

			//是打开简介还是直接跳转到聊天界面
			//this.$emit('openGroupInfo');
		},
		async getOwnPic(ownId) {
			try {
				const res = await db
					.collection('linli-user')
					.where({
						userId: ownId
					})
					.get();
			
			if(res.data.length>0){this.ownPic = res.data[0].nicPic;}	
				
			} catch (e) {
				console.error(e);
			}
		},

		handerlove() {
			this.islove = !this.islove;
		},
		handleRegOwn() {
			uni.navigateTo({
				url: '/pages/regOwn/regOwn'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.main {
	position: fixed;
	width: 750rpx;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	top: 80rpx;
	left: 0;
}
.title {
	display: flex;
	margin-right: 20rpx;
	width: 750rpx;
	height: 60rpx;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
	justify-content: space-around;
	border-radius: 30rpx;
	flex-direction: row;
}
.imgsbox {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.2);
}
.own {
	display: flex;
	position: relative;
	flex-direction: row;
	margin-left: 30rpx;
	width: 300rpx;
	height: 60rpx;
	background-color: #ffaa00;
	border-radius: 30rpx;
	box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.four {
	display: flex;
	flex-direction: row;
	width: 220rpx;
	height: 60rpx;
	align-items: center;
	justify-content: space-around;
	border-radius: 30rpx;
	background-color: rgba(0, 0, 0, 0.3);
}
.stree {
	background-color: #55aaff;
}
.two {
	background-color: white;
}
.count {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.2);
}
.imgs {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
}
.memberImg {
	width: 40rpx;
	height: 40rpx;
	border-radius: 20rpx;
}
.imgs_nogroup {
	width: 40rpx;
	height: 40rpx;
	border-radius: 30rpx;
}
.groupname {
	display: flex;
	flex-direction: row;
	width: 200rpx;
	height: 30rpx;
	align-items: center;
	border-radius: 30rpx;
	padding-left: 20rpx;
}
.nogroup {
	background-color: #aa5500;
}
.groupactive {
	background-color: green;
}
.iconsbox {
	display: flex;
	flex-direction: row;
	width: 80rpx;
	height: 50rpx;
	align-items: center;
	justify-content: space-around;
	border-radius: 30rpx;

	background-color: rgba(0, 0, 0, 0.1);
}
</style>
